<!--
 * @description: 
 * @Date: 2022-10-05 16:21:15
 * @LastEditTime: 2022-11-01 21:27:10
-->
<template>
  <div class="time">
    <div>
      <div @contextmenu.stop class="time-hms  text-7xl mxs:text-6xl" @click="closeList" :style="{color:store.state.config.theme.timeColor}">{{ nowTime }}</div>
      <div @contextmenu.stop class="time-other space-x-2" :style="{color:store.state.config.theme.timeColor}">
        <span class="time-month">{{ nowDate }}</span>
        <span class="time-week">{{ nowWeek }}</span>
        <span class="time-lunar">农历{{ lunar }}</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import solarLunar from 'solarLunar';
import {setRootCss} from "@/util/tools"
import { ref, defineEmits } from "vue"
import { useStore } from 'vuex';
import moment from "moment"
const store = useStore();
const emit = defineEmits(["change", "update"]);
function getTime() {
  return moment().format("HH:mm:ss")
}
const closeList = () => {
  emit("change")
}
function getDate() {
  return moment().format("MM月DD日")
}
function getWeek() {
  let week = moment().day()
  switch (week) {
    case 1:
      return '星期一'
    case 2:
      return '星期二'
    case 3:
      return '星期三'
    case 4:
      return '星期四'
    case 5:
      return '星期五'
    case 6:
      return '星期六'
    case 0:
      return '星期日'
  }
}
function getLunar() {
  const time = moment().format("YYYY-MM-DD").split("-");
  const solar2lunarData = solarLunar.solar2lunar(...time);
  const { monthCn, dayCn } = solar2lunarData;
  return monthCn + dayCn
}
const lunar = ref(getLunar())
const nowTime = ref(getTime())
const nowDate = ref(getDate())
const nowWeek = ref(getWeek())
setInterval(() => {
  nowTime.value = getTime();
  nowDate.value = getDate();
  nowWeek.value = getWeek();
  lunar.value = getLunar()
}, 500)
</script>
<style lang="less" scoped>
:root {
  --timeColor: #fff;
}

.time {
  user-select: none;
  margin-top: 50px;
  display: flex;
  justify-content: center;

  .time-hms {
    font-weight: 500;
    line-height: 80px;
    text-shadow: 0 2px 6px rgb(0 0 0 / 16%);
  }

  .time-other {
    text-align: center;
    font-size: 14px;
    line-height: 26px;
    opacity: 0.88;
    margin-top: -3px;
    text-shadow: 0 2px 4px rgb(0 0 0 / 16%);
  }
}
</style>